<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<c:set var="companyId" value="18" ></c:set>
<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>phone</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
       <!-- 删除苹果默认的工具栏和菜单栏 -->
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <!-- 设置苹果工具栏颜色 -->
       <meta name="apple-mobile-web-app-status-bar-style" content="black" />
       <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
       <meta name="format-detection" content="telphone=no, email=no" />
       <!-- 启用360浏览器的极速模式(webkit) -->
       <meta name="renderer" content="webkit">
       <!-- 避免IE使用兼容模式 -->
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
       <meta name="HandheldFriendly" content="true">
       <!-- 微软的老式浏览器 -->
       <meta name="MobileOptimized" content="320">
       <!-- uc强制竖屏 -->
       <meta name="screen-orientation" content="portrait">
       <!-- QQ强制竖屏 -->
       <meta name="x5-orientation" content="portrait">
       <!-- UC强制全屏 -->
       <meta name="full-screen" content="yes">
       <!-- QQ强制全屏 -->
       <meta name="x5-fullscreen" content="true">
       <!-- UC应用模式 -->
       <meta name="browsermode" content="application">
       <!-- QQ应用模式 -->
       <meta name="x5-page-mode" content="app">
       <!-- windows phone 点击无高光 -->
       <meta name="msapplication-tap-highlight" content="no">
       <!-- 适应移动端end -->
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-   scale=1,user-scalable=no">
       <meta name="format-detection" content="telephone=no">
       <meta name="renderer" content="webkit">
       <meta http-equiv="Cache-Control" content="no-siteapp">
        <link rel="stylesheet" href="${path }/websites/demophone/font-awesome/css/font-awesome.css" media="screen" title="no title">
        <link rel="stylesheet" href="${path }/websites/demophone/plugin/AmazeUI-2.7.2/assets/css/amazeui.min.css">
         <link rel="stylesheet" href="${path }/websites/demophone/plugin/iconfont/iconfont.css">
       <link rel="stylesheet" href="${path }/websites/demophone/css/base.css" media="screen" title="no title">
       <link rel="stylesheet" href="${path }/websites/demophone/css/public.css">
       <script src="${path }/websites/demophone/js/TouchSlide.1.1.js" type="text/javascript"></script>
       <script src="${path }/websites/demophone/plugin/jquery/jquery-3.1.1.js"></script>
       <script src="${path }/websites/demophone/js/index.js" type="text/javascript"></script>
       <cms:setting companyId="${companyId }" var="title" code="title"></cms:setting>
			<title data-index="0" id="selextTitle">${title.paramValue }</title>
       </head>
 <body>
	  <div class="body_container">
                <jsp:include page="_top2.jsp"></jsp:include>
               <div class="container case-tab">
               <div class="con-title">
              <div class="con-title">
                   <div class="con-bg"></div>
                   <div class="text-content">案例展示</div>
                </div> 
                  </div>
             <div class="tab text-center">
               <div class="tab-wrap">
               <a class="pc" onclick="pcClick()"> <span class="active">PC端</span></a>
                 <a class="phone" onclick="phoneClick()"><span>手机端</span></a>
               </div>
             </div> 
         <div class="container case-tab-list">
            <div class="cases-wrap">
             <div class="cases-PC container">
                 <cms:ad companyId="${companyId }" var="alxspc" code="alxspc" ></cms:ad>
              		
              		 <div class="row">
              		 <c:forEach var="item" items="${alxspc }" varStatus="s">
              		<c:if test="${s.index <3}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                         </c:if>
                      </c:forEach>
                      </div>
                      
              		 <div class="row">
              		 
                      <c:forEach var="item" items="${alxspc }" varStatus="s">
                      <c:if test="${s.index >2 && s.index <6}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                         </c:if>
                      </c:forEach>
                      </div>
                      
              		 <div class="row">
              		 
                      <c:forEach var="item" items="${alxspc }" varStatus="s">
                       <c:if test="${s.index >5}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                        </c:if>
              			</c:forEach>
                      </div>
              
                 
              </div>
               <div class="cases-phone container">
                 <cms:ad companyId="${companyId }" var="alxssj" code="alxssj" ></cms:ad>
              		
              		 <div class="row">
              		 <c:forEach var="item" items="${alxssj }" varStatus="s">
              		<c:if test="${s.index <3}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                         </c:if>
                      </c:forEach>
                      </div>
                      
              		 <div class="row">
              		 
                      <c:forEach var="item" items="${alxssj }" varStatus="s">
                      <c:if test="${s.index >2 && s.index <6}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                         </c:if>
                      </c:forEach>
                      </div>
                      
              		 <div class="row">
              		 
                      <c:forEach var="item" items="${alxssj }" varStatus="s">
                       <c:if test="${s.index >5}">
                         <div class="col col-33">
                             <img src="${item.adImg}" alt="" />
                         </div>
                        </c:if>
              			</c:forEach>
                      </div>
              
                 
              </div>
            </div>
          </div>
         </div>   

           <jsp:include page="_foot2.jsp"></jsp:include>
     </div>
      <script>
    function  pcClick(e){
    	 $(".phone").find("span").removeClass("active")
         $(".pc").find("span").addClass("active")
    	  $(".cases-PC").show();
          $(".cases-phone").hide();
    }
    function  phoneClick(e){
    	 $(".pc").find("span").removeClass("active")
         $(".phone").find("span").addClass("active")
    	$(".cases-PC").hide();
        $(".cases-phone").show();
  }
             
  
    </script>
</body>
</html>